<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
  <!--遍历数组-->
  <button @click="addPerson">点击添加一个人</button>
  <ul>
    <li v-for="p in persons" :key="p.id">{{p.id}}-{{p.name}}-{{p.age}}</li>
  </ul>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#root',
    data: {
      persons: [
        {id: '001', name: '张三', age: 17},
        {id: '002', name: '李四', age: 18},
        {id: '003', name: '王五', age: 19}
      ]
    },
    methods:{
      addPerson(){
        //直接通过索引操作数组,vue是无法监测到的,通过数字自带的五个方法,可以实现vue的监测,因为数组的这5个方法被vue包装了一层
        //调用这5个方法的包装方法的同时,不仅修改了数组,而且还去更新了虚拟DOM
        /*const  arr = [];
        arr.push();
        arr.sort();
        arr.shift();
        arr.unshift();
        arr.splice()*/


        //错误的做法
        //this.persons[3] = {id: '004', name: '新增王五', age: 19};

        //正确做法
        vm.$set(this.persons,3,{id: '004', name: '新增王五', age: 20});

        //正确做法
        //this.persons.push({id: '004', name: '新增王五', age: 19});
        //vm.
      }
    }
  });
</script>
</body>
</html>
